<template>
  <div id="toast" :style="{display:is_show?'':'none'}">
    <div class="weui-mask_transparent" @click.stop="$emit('on-mask')"></div>
    <div class="weui-toast">
      <i class="weui-icon_toast"
         :class="{'weui-icon-success-no-circle':type=='success', 'weui-icon-warn':type=='warn', 'weui-loading':type=='loading'}">
      </i>
      <p class="weui-toast__content">{{content}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      is_show: false,
      content: '',
      type: ''
    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>

<style scoped>
  .weui-icon_toast.weui-icon-warn {
    font-size: 55px;
    color: #F76260;
  }
</style>
